<template>
	<view class="root-view">
		<view class="device-layout-block">
			<view class="device-layout-mod">
				<view class="device-layout-mhead">
					<evan-steps :active="0" direction="horizontal" primaryColor="#428cff">
						<evan-step></evan-step>
						<evan-step></evan-step>
						<evan-step></evan-step>
					</evan-steps>
					 <!-- <u-steps :list="numList" :current="0" mode="number" active-color="#428cff"></u-steps> -->
				</view>
				<view class="device-layout-mbody">
					<view class="textinfo-box">
						<view class="textinfo-title">PP棉前置活性炭滤芯</view>
						<view class="textinfo-desc">若设备已处于下方状态，直接点击确认下一步</view>
						<view class="textinfo-ol">
							<view class="ol-li">1：请接通设备电源</view>
							<view class="ol-li">2：请长按设备配置按钮（5秒）</view>
							<view class="ol-li">3：确认指示灯处于闪烁状态</view>
						</view>
					</view>
					<view class="mediainfo-box">
						<u-image width="580" height="360" src="/static/images/device/step-1-pic.png">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
				</view>
				<view class="device-layout-mfoot">
					<view class="device-layout-btns">
						<view class="btn-cell">
							<button class="coco-btn theme round lg shadow" @click="jump('add-device-step2')">下一步</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import evanStep from '@/components/evan-steps/evan-step.vue';
	export default {
		components:{
			evanStep
		},
		data() {
			return {
				numList: [{
					name: '滤芯'
				}, {
					name: 'WIFI'
				}, {
					name: '设备'
				} ],
			};
		},
		methods:{
			jump(path) {
				this.$tools.routerTo(path);
			},
		}
	}
</script>

<style lang="scss">
	@import "./css/device.scss";
</style>
